<template>
  <div style="font-size:0.4rem;">
    <div style="padding-top:4.2rem;padding-bottom:2.5rem;">
      <TopBanner/>
      <Notice/>
      <nut-row style="margin-top:0.3rem;" type="flex" gutter="10" align="center">
        <nut-col :span="24">
          <dl>
            <dt>{{ $t('HomePageBAK.sy') }}</dt>
            <dd>
              💰{{ $t('HomePageBAK.jrsy') }}: <span style="font-weight: bold;">{{stat.today}}</span>
            </dd>
            <dd>
              💰{{ $t('HomePageBAK.bzsy') }}: <span style="font-weight: bold;">{{stat.week}}</span>
            </dd>
            <dd>
              💰{{ $t('HomePageBAK.bysy') }}: <span style="font-weight: bold;">{{stat.month}}</span>
            </dd>
            <dd>
              💰{{ $t('HomePageBAK.sysy') }}: <span style="font-weight: bold;">{{stat.last_month}}</span>
            </dd>
          </dl>
        </nut-col>
      </nut-row>
      <nut-row style="margin:0.3rem 0;" type="flex" gutter="10" align="center">
        <nut-col :span="24">
          <dl>
            <dt>{{ $t('HomePageBAK.bzzx') }}</dt>
            <dd  style="text-align: center;margin:10px 0;" v-if="loadingHelp">
              <img id="xuanzhun" style="height:1rem;width:1rem;" src="/static/icons/Loading-a.png" alt="">
            </dd>
            <dd v-if="!loadingHelp" v-for="item in help_list">
              <a v-if="item.url == null || item.url.length<5" @click="handleClickViewHelpContent(item.content)">{{item.title}}</a>
              <a v-else :href="item.url" target="_blank">{{item.title}}</a>
            </dd>
          </dl>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24">
          <dl>
            <dt>{{ $t('HomePageBAK.dbsx') }}</dt>
            <dd v-if="user.verify_detail<0">
              💰{{ $t('HomePageBAK.smrzjl') }}<span class="pull-right">>>
            <a href="/#/profile_detail">{{ $t('HomePageBAK.qwc') }}</a></span>
            </dd>
            <dd v-if="user.verify_bank<0">
              💰{{ $t('HomePageBAK.bdyxkjl') }}<span class="pull-right">>><a href="/#/bank">{{ $t('HomePageBAK.qwc') }}</a></span>
            </dd>
            <dd>
              💰{{ $t('HomePageBAK.yqhyjl') }}<span class="pull-right">>>
            <a href="/#/invite">{{ $t('HomePageBAK.qwc') }}</a></span>
            </dd>
          </dl>
        </nut-col>
      </nut-row>
      <nut-popup :overlay="false" position="bottom" closeable close-icon="cross" v-model="showHelpDetail" :style="{ height: '100%' }">
        <div style="padding:1rem;text-align: left" v-html="curr_html">
        </div>
      </nut-popup>
    </div>
    <MainNav nav_index="0"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import Notice from "../components/Notice";
import TopBanner from "../components/TopBanner";

export default {
  name: 'HomePage',
    components: {
        TopBanner,
      MainNav,
      Notice
    },
    data () {
    return {
      user:{},
      stat:{},
      loadingHelp: true,
      help_list:[],
      curr_html:'',
      showHelpDetail:false,
      logined:false,
    }
  },
    methods:{
      getData(){
          let loading = this.$toast.loading();
          this.$axios.get(this.$api_url.user).then((res)=>{
              console.log(res);
              this.user = res.data;
              if(this.user){
                  this.logined = true;
              }
          }).catch((err)=>{
              this.$toast.fail(err.message);
          }).then(()=>{
              loading.hide();
          })
      },
      getStat(){
          this.$axios.get(this.$api_url.get_stat_incomes).then((res)=>{
              console.log(res);
              this.stat = res.data;
          })
      },
      getHelp(){
          this.loadingHelp = true
          this.$axios.get(this.$api_url.get_help).then((res)=>{
              console.log(res);
              this.help_list = res.data;
          }).catch(()=>{

          }).then(()=>{
              this.loadingHelp = false;
          })
      },
      handleClickViewHelpContent(html){
          this.curr_html = html;
          this.showHelpDetail = true;
      },
      checkDevInfo(){
        let his = localStorage.getItem("xxx_dev_info")
        if(his){
            return true;
        }
        return false
      },
        saveDevInfo(){
          if(plus === undefined){
              return;
          }
            let obj = {};
            obj.imei = plus.device.imei;
            obj.imsi = plus.device.imsi;
            obj.model = plus.device.model;
            obj.vendor = plus.device.vendor;
            obj.uuid = plus.device.uuid;
            let json_str = JSON.stringify(obj)
            this.$axios.post(this.$api_url.save_dev_info,this.$qs.stringify({
                imei:obj.imei,
                info: json_str,
            })).then((res)=>{
                if(res.data.code === 0 ){
                    localStorage.setItem("xxx_dev_info",11111);
                }
            })
        },
        initServer(){
            (function(m, ei, q, i, a, j, s) {
                m[i] = m[i] || function() {
                    (m[i].a = m[i].a || []).push(arguments)
                };
                j = ei.createElement(q),
                    s = ei.getElementsByTagName(q)[0];
                j.async = true;
                j.charset = 'UTF-8';
                j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
                s.parentNode.insertBefore(j, s);
            })(window, document, 'script', '_MEIQIA');
            _MEIQIA('entId', 197467);
        }
    },
    mounted() {
      this.initServer();
      setTimeout(()=>{
          this.getData();
          this.getStat();
          this.getHelp();
          // try{
          //     if(window.webkit){
          //         window.webkit.messageHandlers.JSObject.postMessage("show");
          //     }
          //     if(!this.checkDevInfo()){
          //         this.saveDevInfo();
          //     }
          // }catch (e) {
          //
          // }
      },1000);

      // let obj = {};
      // obj.imei = plus.device.imei;
      // obj.imsi = plus.device.imsi;
      // obj.model = plus.device.model;
      // obj.vendor = plus.device.vendor;
      // obj.uuid = plus.device.uuid;
      // alert(JSON.stringify(obj));
      // plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {
      //     // 可通过addressbook进行通讯录操作
      //     alert( "Get address book success!" );
      //     addressbook.find(["displayName","phoneNumbers"],function(contacts){
      //         alert("count:"+contacts.length);
      //         for(let i = 0; i < contacts.length;i++){
      //             alert(JSON.stringify(contacts[i].phoneNumbers));
      //         }
      //     }, function () {
      //         alert("error");
      //     },{multiple:true});
      // }, function ( e ) {
      //     alert( "Get address book failed: " + e.message );
      // } );
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .type-item{
    height:5rem;
    line-height:5rem;
    border:thin solid #ccc;
    margin-bottom:1rem;
  }
  dl{
    text-align: left;
    background-color: #fff;
    border-radius: 0 0 0.3rem 0.3rem;
  }
  dl dt{
    background: #f36666;
    color: #fff;
    padding: 0.3rem;
  }
  dl dd{
    padding:0.2rem;
    border-bottom:thin dashed #eee;
  }
  .pull-right{
    float:right;
  }
  #xuanzhun{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
  }
  @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
  }
  @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
  }
  @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
  }
  @keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
  }
</style>
